<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化开发</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
    什么是组件化开发 ?
    为了实现某些特定的需求，将实现这一需求的 html，css，js 静态资源等进行打包 形成一个文件   xxx.vue
   使用组件化开发 可以实现代码的复用 提升编码的效率  便于代码的管理

    index.html   页面布局 html   页面优化 css   动态交互 js

    组件化的开发的形式：
      1.非单文件组件   一个文件中定义多个组件
      2.单文件组件    一个文件中只定义一个组件   .vue

    如何使用组件完成开发
    1.定义组件
    2.注册组件
        2.1  全局组件注册    可以在任何地方去使用组件

        2.2  局部组件注册    只能在父组件中使用该组件

    3.使用组件  组件标签 实现组件的引用


    组件的传参： 通过在使用标签时 在标签中使用标签属性完成参数的传递
        1. 父  -> 子组件  props
        2. 子组件 -> 父组件  通过函数的传递实现
-->

<div id="app">
    <h1>count={{count}}</h1>
<!--    将父组件中的函数传递到子组件中-->
    <school @fatherfn="fatherFn"></school>
<!--     在进行列表渲染时 vue建议在标签中添加一个key 作为标签的唯一标识符 -->
    <student :key="index" v-for="(student,index) in students" :name="student.name" :major="student.major" :age="student.age"></student>
</div>


<script type="text/javascript">

    // 1.定义学生信息组件
    const student = {
        template: `
         <div style="width: 300px;height: 250px;border: 1px solid red; margin-bottom: 10px;">
                <h1>{{info}}</h1>
                <p>学生姓名:{{studentName}}</p>
                <p>学生年龄:{{age}}</p>
                <p>学生专业:{{major}}</p>
         </div>
        `,
        data(){   // 组件中使用data  需要使用data函数形式 让组件中都拥有独立的data数据
            return{
                info:'学生信息展示',
                studentName:this.name,   //  通过this关键词可以直接访问在props中声明的参数
                // age:20,
                // major:'Java开发'
            }
        },
        props:['name','age','major']   // 声明外部传递的参数

    }

    // 定义一个学校组件
    const school = {
        template: `
            <div>
                <h1>学校信息展示</h1>
                <p>学校名字:kgc</p>
                <p>学校地址:安徽合肥</p>
                <student></student>
                <button @click="toFather">传递参数到父组件</button>
            </div>
        `,
        methods: {
            toFather(){
                console.log(this.numbers)
                // 调用父组件中传递的函数
                this.$emit("fatherfn",this.numbers)
            }
        },
        data(){
            return{
                numbers:20
            }
        },
        components: {
            student
        }
    }


    // 2.注册组件   全局注册组件
    // Vue.component("student",studentInfo)

    const vm = new Vue({
        el: '#app',
        data: {
            count:0,
            info: '学生信息的展示',
            students:[
                {
                    name:'tom',
                    age:25,
                    major:'大数据开发'
                },

                {
                    name:'tom2',
                    age:26,
                    major:'大数据开发'
                },
                {
                    name:'tom3',
                    age:24,
                    major:'大数据开发'
                }

            ]
        },
        methods: {
            fatherFn(number){
                console.log("父组件中的函数被调用")
                this.count = number
            }
        },
        components:{   //  局部组件注册
           // student:student
            student,school
        }
    })

</script>
</body>
</html>
